<template>
  <el-dialog :title="options.title" :visible.sync="options.dialogVisible" :modal-append-to-body="false" :destroy-on-close="false"
    custom-class="body-wrapper" @close="closeDialog" width="800px">
    <n-tab :options="tabOptions" style="background-color: #fff;padding-left: 10px;" @click="tabCheckHandler"/>

    <export-selector  v-if="tabItem && tabItem.gridCategory==='common'" ref="common" :data="models.common"></export-selector>
    <export-selector  v-if="tabItem && tabItem.gridCategory==='commonExt'" ref="commonExt" :data="models.commonExt"></export-selector>
    <export-selector  v-if="tabItem && tabItem.gridCategory==='dynamic'" ref="dynamic" :data="models.dynamic"></export-selector>
    <div slot="footer" class="dialog-footer">
      <el-button @click="options.dialogVisible = false" size="medium">取 消</el-button>
      <el-button type="primary" @click="selectDownload" size="medium">选择下载</el-button>
      <el-button type="primary" @click="defaultDownload" size="medium">默认下载</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import {Component, Prop, Vue ,Emit} from 'vue-property-decorator';
import ExportSelector from '@/views/quality/components/ExportSelector.vue'
import {exportParam} from '@/api/investDataCommon';
import NTab from "@/components/NTab.vue";
@Component({
  components: { ExportSelector,NTab}
})
export default class CommonDialog extends Vue {
  @Prop() private options!:any;

  tabItem:any ={};
  tabOptions:any=[];
  models:any = {
    common:{
      headOptions:{
        data:null,
        checkedValues:[]
      },
      codeOptions:{
        data:null,
        checkedValues:[]
      },
      endOptions:{
        data:null,
        checkedValues:[]
      }
    },
    commonExt:{
      headOptions:{
        data:null,
        checkedValues:[]
      },
      codeOptions:{
        data:null,
        checkedValues:[]
      },
      endOptions:{
        data:null,
        checkedValues:[]
      }
    },
    dynamic:{
      headOptions:{
        data:null,
        checkedValues:[]
      },
      codeOptions:{
        data:null,
        checkedValues:[]
      },
      endOptions:{
        data:null,
        checkedValues:[]
      }
    }
  }


  closeDialog() {
    this.options.dialogVisible = false;
  }

  
  /*下载*/
  @Emit('downloadHandler')
  selectDownload() {
    this.closeDialog();
    return this.models;
  }

  @Emit('downloadHandler')
  defaultDownload(){
    this.closeDialog();
    return null;
  }

  exportParamProcess(){
    exportParam({structureId:this.options.structureId}).then(res =>{
        const dt = res.data;
        this.tabOptions =[];
        if(dt.common){
          this.tabOptions.push({label:'基本附表',gridCategory:'common'})
          this.models.common.headOptions.data = dt.common.head;
          this.models.common.headOptions.checkedValues =[];
          this.models.common.codeOptions.data = dt.common.code;
          this.models.common.codeOptions.checkedValues =[];
          this.models.common.endOptions.data = dt.common.end;
          this.models.common.endOptions.checkedValues =[];
        }
        if(dt.commonExt){
          this.tabOptions.push({label:'扩展附表',gridCategory:'commonExt'})
          this.models.commonExt.headOptions.data = dt.commonExt.head;
          this.models.commonExt.headOptions.checkedValues =[];
          this.models.commonExt.codeOptions.data = dt.commonExt.code;
          this.models.commonExt.codeOptions.checkedValues =[];
          this.models.commonExt.endOptions.data = dt.commonExt.end;
          this.models.commonExt.endOptions.checkedValues =[];
        }
        if(dt.dynamic){
          this.tabOptions.push({label:'其它附表',gridCategory:'dynamic'})
          this.models.dynamic.headOptions.data = dt.dynamic.head;
          this.models.dynamic.headOptions.checkedValues =[];
          this.models.dynamic.codeOptions.data = dt.dynamic.code;
          this.models.dynamic.codeOptions.checkedValues =[];
          this.models.dynamic.endOptions.data = dt.dynamic.end;
          this.models.dynamic.endOptions.checkedValues =[];
        
        }
        this.tabItem =this.tabOptions[0];
    }).catch(e =>{
      console.error(e);
    })
  }

  tabCheckHandler(data){
    this.tabItem = {...data.item};
    
  }

}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
    padding: 0px 10px; 
    color: #606266;
    font-size: 14px;
    word-break: break-all;
}

::v-deep .el-dialog__header {
    padding: 5px;
    padding-bottom: 0px;
}
</style>
